<template>
    <div class="collapse-item">
        <div class="title" @click="toggle">
            {{title}}
        </div>
        <div class="content" v-if="visible">
            <slot></slot>
        </div>
    </div>
</template>

<script lang="ts">
  import Vue from "vue";
  import {Component, Prop,Inject} from "vue-property-decorator";

  @Component
  export default class CollapseItem extends Vue {
    @Prop({type: String, required: true}) title: string;
    @Prop({type: Object}) selected: object;
    @Inject() readonly eventBus?:any;
    visible: boolean = false;

    toggle() {
      if (this.visible) {
        this.visible = false;
      } else {
        this.visible=true;
        this.eventBus?.$emit("update:selected", this);
      }
    }

    close() {
      this.visible = false;
    }

    created() {
      this.eventBus?.$on("update:selected", (vm) => {
        if (vm !== this) {
          this.close();
        }
      });

    }
  }
</script>

<style lang="scss" scoped>
    .collapse-item {
        > .title {
            border-bottom: 1px solid #ddd;
            border-top: 1px solid #ddd;
            min-height: 32px;
            padding: 0 8px;
            display: flex;
            align-items: center;
            cursor: pointer;

            &:last-child {
                border-bottom: none
            }

        }

        &:first-child {
            > .title {
                border-top: none
            }
        }

        > .content {
            padding: 8px;
        }
    }


</style>